<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="page = 1">
      <!-- 提示 -->
      <van-notice-bar v-if="notice">
        <template>打开京东App，购物更轻松</template>
        <template #right-icon>
          <div class="vnb-open">立即打开</div>
        </template>
        <template #left-icon>
          <div @click="notice = false">
            <img
              src="https://m.360buyimg.com/mobilecms/jfs/t19480/10/1439571805/820/787bec2c/5ac9d730N04e6d766.png"
              alt=""
            />
          </div>
          <div>
            <img
              src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t27847/91/107794072/6854/14716732/5b850ecaN644d2983.png"
              alt=""
            />
          </div>
          <!-- </div> -->
        </template>
      </van-notice-bar>
      <!-- 搜索框 -->
      <div
        class="search_wrapper j_smart_box_wrapper skin_transparent"
        :style="[
          { top: !notice || scroll ? '0px' : '45px' },
          { backgroundColor: scroll ? '#f63515' : '' },
        ]"
      >
        <div
          id="searchWrapper"
          class="search-land main-page2"
          style="display: block"
        >
          <div class="mjd-header">
            <div class="m_common_container">
              <div class="m_cc_header_inner">
                <header class="jd-header">
                  <div class="jd-header-new-bar">
                    <div
                      id="msCancelBtn"
                      class="jd-header-icon-back J_ping"
                      style="display: block"
                    >
                      <span></span>
                    </div>
                    <div class="jd-header-new-title"></div>
                    <div
                      id="msShortcutLogin"
                      class="jd-header-icon-new-shortcut-text J_ping"
                      style="display: block"
                    >
                      <span>登录</span>
                    </div>
                    <div
                      id="msShortcutMenu"
                      class="jd-header-icon-new-shortcut J_ping"
                      style="display: none"
                    >
                      <span></span>
                    </div>
                  </div>
                </header>
              </div>
              <div class="m-common-header-search">
                <form
                  action="/search/search.action"
                  class="jd-header-search-form"
                >
                  <div
                    class="jd-header-search-box"
                    id="msSearchBox"
                    style="margin-right: 32px"
                  >
                    <i id="search-input-left-jd" class="jd-header-icon-jd"></i
                    ><i
                      id="search-input-left-icon"
                      class="jd-header-icon-fdj"
                    ></i>
                    <div class="jd-header-search-input">
                      <input
                        value=""
                        maxlength="20"
                        name="keyword"
                        id="msKeyWord"
                        type="text"
                        cleardefault="no"
                        autocomplete="off"
                        placeholder="对开门冰箱"
                        class="hilight2"
                      />
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img
        class="back"
        src="https://m.360buyimg.com/mobilecms/s1125x939_jfs/t1/171161/19/22312/429339/61711b12E14a7452d/112ffeab0a1f2a14.png!q70.jpg"
        alt=""
      />

      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" lazy-render indicator-color="#fa2c19">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image.src" />
        </van-swipe-item>
      </van-swipe>

      <!-- 活动 -->
      <div class="activity">
        <div class="ac-left">
          <div>
            <img
              src="//m.360buyimg.com/mobilecms/jfs/t1/145084/34/20774/84900/617625fbE7e3cd365/38338b8eb02064c2.jpg!q70.jpg"
              alt=""
            />
          </div>
          <img
            src="//m.360buyimg.com/mobilecms/s270x345_jfs/t1/211612/18/6351/57137/61722afaE3dd043f6/7a0b178c4df9515f.png!q70.jpg"
            alt=""
          />
          <span>百大爆品</span>
        </div>
        <div class="ac-middle">
          <div>
            <img
              src="//m.360buyimg.com/mobilecms/jfs/t1/196187/38/10985/87858/60dc26a5Ed269f7b3/64f8f711da208f9e.jpg!q70.jpg"
              alt=""
            />
            <img
              src="//m.360buyimg.com/mobilecms/jfs/t1/122505/19/15070/68848/5f861494Ebe330db5/24bc162f493ec940.jpg!q70.jpg"
              alt=""
            />
          </div>
          <img
            src="//m.360buyimg.com/mobilecms/jfs/t1/198538/10/15106/102853/617b61a5E73dd9584/0b351e22aa38a305.gif"
            alt=""
          />
        </div>
        <div class="ac-right">
          <div>
            <img
              src="//m.360buyimg.com/mobilecms/jfs/t1/189656/32/19190/296820/611e235cE00c2c8e6/e6d6e89092967c58.jpg!q70.jpg"
              alt=""
            />
          </div>
          <img
            src="//m.360buyimg.com/mobilecms/s270x345_jfs/t1/218995/23/1377/51946/61722c61E0ccc7778/ee4d88e23210af4e.png!q70.jpg"
            alt=""
          />
          <span>车品9折</span>
        </div>
      </div>

      <!-- 品类 -->
      <van-swipe class="qf-cate" :loop="false" indicator-color="#fa2c19">
        <van-swipe-item>
          <van-grid :column-num="5" :border="false" :icon-size="40">
            <van-grid-item
              v-for="i in 10"
              :key="i"
              icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"
              text="京东超市"
            />
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid :column-num="5" :border="false" :icon-size="40">
            <van-grid-item
              v-for="i in 10"
              :key="i"
              icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"
              text="京东超市"
            />
          </van-grid>
        </van-swipe-item>
      </van-swipe>

      <!-- 商品 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="page++"
        :immediate-check="false"
        offset="150"
      >
        <GoodList :list="list" />
      </van-list>
    </van-pull-refresh>
    <TabBar />
  </div>
</template>
<script>
import { TabBar } from "@/components";
import GoodList from "./Goodlist.vue";
export default {
  name: "Home",
  components: {
    TabBar,
    GoodList,
  },
  data() {
    return {
      notice: true,
      scroll: 0,
      images: [
        {
          id: 1,
          src: "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/181068/13/16622/771845/6102a71aE15dbe36e/c7f4953bb30e1efe.png!cr_1053x420_4_0!q70.jpg.dpg",
        },
        {
          id: 2,
          src: "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/198829/36/14040/65895/61712053Ec3a8dfb7/124a0bb71ea68d58.jpg!cr_1053x420_4_0!q70.jpg.dpg",
        },
        {
          id: 3,
          src: "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/213829/2/2037/64744/6178f13aEea971783/d95379f7af10919e.jpg!cr_1053x420_4_0!q70.jpg.dpg",
        },
      ],
      loading: false,
      finished: false,
      refreshing: false,
      n: 0,
      list: [],
      page: 1,
    };
  },
  created() {
    this.getList();
  },
  watch: {
    loading() {
      if (this.loading) this.getList();
    },
    refreshing() {
      if (this.refreshing) this.getList();
    },
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll);
  },
  methods: {
    getScroll() {
      this.scroll =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    },
    getList() {
      const params = { size: 6, page: this.page };
      this.$api.fetchGoodList(params).then((res) => {
        // console.log("商品列表", res);
        if (this.page == 1) {
          this.list = res.data.list;
          this.refreshing = false;
          this.finished = false;
        } else {
          // 把分页数据合并到this.list上
          this.list = [...this.list, ...res.data.list];
          this.loading = false;
          // 判断是否到底了：判断数据库还有没有数据
          this.finished = this.list.length === res.data.total;
        }
        // 加载完成，保证下一次触底功能也是正常的
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scope>
.van-notice-bar {
  height: 0.6rem;
  display: flex;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 0;
  z-index: 1;
  .vnb-open {
    height: 100%;
    width: 25%;
    background-color: #f63515;
    font-size: 0.186667rem;
    color: #fff;
    letter-spacing: 0;
    float: left;
    line-height: 0.6rem;
    height: 0.6rem;
    box-sizing: border-box;
    text-align: center;
  }
  .van-notice-bar__wrap {
    width: 57%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.186667rem;
    float: left;
    line-height: 0.6rem;
    height: 0.6rem;
    box-sizing: border-box;
    text-align: center;
  }
}
.van-notice-bar > div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8%;
  line-height: 0.6rem;
  text-align: center;
  height: 0.6rem;
  & > img {
    width: 33%;
    vertical-align: middle;
    margin-top: 0px;
    height: 22%;
  }
}
.van-notice-bar > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
  line-height: 0.6rem;
  text-align: center;
  height: 0.6rem;
  & > img {
    width: 80%;
    vertical-align: middle;
    margin-top: 0px;
    height: 66%;
  }
}

.back {
  width: 5rem;
  height: 2.493333rem;
  position: absolute;
  top: 0;
}

.van-swipe {
  margin-top: 45px;
}

.van-swipe-item > img {
  width: 4.666667rem;
  height: 1.866667rem;
  border-radius: 0.146667rem;
  margin-left: 0.146667rem;
}
.activity {
  display: flex;
  font-size: 12px;
  color: #fff;
}

.ac-left {
  position: relative;
  & > div {
    position: absolute;
    top: 21px;
    left: 15px;
  }
  & > div > img {
    width: 0.866667rem;
  }
  & > img {
    height: 1.533333rem;
    width: 1.2rem;
    position: relative;
    z-index: 1;
  }
  & > span {
    position: absolute;
    display: block;
    top: 90px;
    left: 20px;
    z-index: 2;
  }
}
.ac-middle {
  position: relative;
  & > div {
    position: absolute;
    width: 84%;
    display: flex;
    justify-content: space-between;
    top: 18px;
    left: 15px;
  }
  & > div > img {
    width: 0.933333rem;
  }
  & > img {
    height: 1.533333rem;
    width: 2.533333rem;
    position: relative;
    z-index: 1;
  }
  & > span {
    position: absolute;
    display: block;
  }
}
.ac-right {
  position: relative;
  & > div {
    position: absolute;
    top: 26px;
    left: 10px;
  }
  & > div > img {
    width: 0.866667rem;
  }
  & > img {
    height: 1.533333rem;
    width: 1.2rem;
    position: relative;
    z-index: 1;
  }
  & > span {
    position: absolute;
    display: block;
    top: 90px;
    left: 20px;
    z-index: 2;
  }
}
.qf-cate {
  background-color: #f6f6f6;
  margin: 0;
}
.floor-the-container {
  position: relative;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0;
}
</style>
